<div class="row-fluid">
  <div class="span12">

    <div class="box">
      <div class="box-header">
        <span class="title">Forms</span>
        <ul class="box-toolbar">
          <li>
            <i class="icon-refresh"></i>
          </li>
          <li>
            <input type="checkbox" class="iButton-icons" checked="checked" />
          </li>
          <li class="toolbar-link">
            <a href="#" class="dropdown" data-toggle="dropdown"><i class="icon-cog"></i></a>
            <ul class="dropdown-menu">
              <li><a href="#"><i class="icon-plus-sign"></i> Add</a></li>
              <li><a href="#"><i class="icon-remove-sign"></i> Remove</a></li>
              <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
            </ul>
          </li>
        </ul>
      </div>

      <div class="box-content">

        <form class="fill-up">

          <div class="row-fluid">
            <div class="span6">

              <ul class="padded separate-sections">

                <li class="input">
                  <input type="text" placeholder="Email"/>
                </li>

                <li class="input">
                  <input type="text" placeholder="Address"/>
                </li>

                <li class="input">
                  <input type="text" placeholder="Username"/>
                </li>

                <li class="input">
                  <input type="password" placeholder="Password"/>
                </li>

                <li class="clearfix">
                  <div class="note pull-right">Please use a secure password</div>
                </li>

                <li class="input">
                  <input type="file" name="img">
                </li>

                <li>
                  <label>Dropdown with search:</label>
                  <%= select_tag :colors, options: @colorList.shuffle, class: "chzn-select" %>
                </li>

                <li>
                  <label>Dropdown menu:</label>
                  <%= select_tag :colors, options: @colorList.shuffle, class: "uniform" %>
                </li>

                <li>
                  <label>Dropdown with multiple choice:</label>
                  <select multiple="multiple" name="colors[]" class="chzn-select">
                    <option value="SAE/ECE Amber (color)">SAE/ECE Amber (color)</option>
                    <option value="Alloy orange">Alloy orange</option>
                    <option value="Amethyst">Amethyst</option>
                    <option value="Antique bronze">Antique bronze</option>
                    <option value="Air superiority blue">Air superiority blue</option>
                    <option value="Amber" selected="selected">Amber</option>
                    <option value="Anti-flash white" selected="selected">Anti-flash white</option>
                    <option value="Android Green">Android Green</option>
                    <option value="Air Force blue (RAF)">Air Force blue (RAF)</option>
                    <option value="Amazon">Amazon</option>
                    <option value="Alabama Crimson">Alabama Crimson</option>
                    <option value="Amaranth" selected="selected">Amaranth</option>
                    <option value="Alizarin crimson">Alizarin crimson</option>
                    <option value="Air Force blue (USAF)">Air Force blue (USAF)</option>
                    <option value="American rose">American rose</option>
                    <option value="Alice blue">Alice blue</option>
                    <option value="Aero blue">Aero blue</option>
                    <option value="Antique fuchsia ">Antique fuchsia </option>
                    <option value="Antique brass">Antique brass</option>
                    <option value="Almond">Almond</option></select>
                </li>

                <li class="input">
                  <label>Tags:</label>
                  <textarea class="tags" placeholder="This is a textarea">tag1,tag2,tag3</textarea>
                </li>
              </ul>
            </div>

            <div class="span6">

              <ul class="padded separate-sections">
                <li class="input">
                  <textarea placeholder="This is a textarea" rows="6"></textarea>
                </li>

                <li>
                  <div class="row-fluid">

                    <div class="span6">
                      <div>
                        <input type="checkbox" class="icheck" checked id="icheck1">
                        <label for="icheck1">The number one option</label>
                      </div>

                      <div>
                        <input type="checkbox" class="icheck" id="icheck2">
                        <label for="icheck2">The number two option</label>
                      </div>
                    </div>

                    <div class="span6">
                      <div>
                        <input type="checkbox" class="icheck" disabled id="icheck3">
                        <label for="icheck3">Number three (disabled)</label>
                      </div>

                      <div>
                        <input type="checkbox" class="icheck" checked disabled id="icheck4">
                        <label for="icheck4">Number four (disabled & checked)</label>
                      </div>
                    </div>
                  </div>
                </li>

                <li>
                  <input class="datepicker fill-up" type="text" placeholder="date picker">
                </li>

                <li>
                  <div class="row-fluid">

                    <div class="span6">

                      <div>
                        <input type="radio" name="optionsRadios[abc]" class="icheck" checked id="iradio1">
                        <label for="iradio1">The number one option</label>
                      </div>

                      <div>
                        <input type="radio" name="optionsRadios[abc]" class="icheck" id="iradio2">
                        <label for="iradio2">The number two option</label>
                      </div>

                    </div>

                    <div class="span6">

                      <div>
                        <input type="radio" class="icheck" disabled id="iradio3">
                        <label for="iradio3">Number three (disabled)</label>
                      </div>

                      <div>
                        <input type="radio" class="icheck" checked disabled id="iradio4">
                        <label for="iradio4">Number four (disabled & checked)</label>
                      </div>

                    </div>
                  </div>
                </li>
                <li>
                  <div class="row-fluid">
                    <div class="span12">

                      <div class="note large">
                        <i class="icon-warning-sign"></i> Warning: You have to complete all fields
                      </div>

                      <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non felis non orci congue mollis. Sed euismod magna sed nunc dignissim tincidunt. Maecenas faucibus varius elit.
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-blue">Save changes</button>
            <button type="button" class="btn btn-default">Cancel</button>
            <div class="pull-right">
              <div>
                <input type="checkbox" class="icheck" checked id="ichecks">
                <label for="ichecks">Sign me up for tha' newsletta!</label>
              </div>
            </div>
          </div>
        </form>

      </div>
    </div>

  </div>
</div>


<div class="row-fluid">
  <div class="span12">

    <div class="box">
      <div class="box-header">
        <span class="title"><i class="icon-warning-sign"></i> Forms with validation</span>
      </div>

      <div class="box-content">

        <form class="form-horizontal fill-up validatable">

          <div class="padded">

            <div class="control-group">
              <label class="control-label">Email</label>
              <div class="controls">
                <input type="text" class="validate[required]" data-prompt-position="topLeft"/>
              </div>
            </div>

            <div class="control-group">
              <label class="control-label">Address</label>
              <div class="controls">
                <input type="text" class="validate[required]" data-prompt-position="topLeft"/>
              </div>
            </div>

            <div class="control-group">
              <label class="control-label">Username</label>
              <div class="controls">
                <input type="text" class="validate[required]" data-prompt-position="topLeft"/>
              </div>
            </div>

            <div class="control-group">
              <label class="control-label">Password</label>
              <div class="controls">
                <input type="password" id="password" class="validate[required,minSize[4]]">
                <span class="help-block note"><i class="icon-warning-sign"></i> Please use a secure password.</span>
              </div>
            </div>

            <div class="control-group">
              <label class="control-label">Confirmation</label>
              <div class="controls">
                <input type="password" id="password_confirmation" class="validate[required,equals[password],minSize[4]]"/>
              </div>
            </div>

          </div>

          <div class="form-actions">
            <button type="submit" class="btn btn-blue">Save changes</button>
            <button type="button" class="btn btn-default">Cancel</button>
            <div class="pull-right">
              <div>
                <input type="checkbox" class="icheck" id="ichecks2">
                <label for="ichecks2">Sign me up for tha' newsletta!</label>
              </div>
            </div>
          </div>
        </form>

      </div>
    </div>

  </div>
</div>


<div class="box">
  <div class="box-header"><span class="title">Bootstrap X-Editable</span></div>
  <div class="box-content">
    <%= partial 'partials/bootstrap_editable' %>
  </div>
</div>



